<template lang="pug">
.role
  .role-menus
    .role-menus-header
      .menus-header-title 系统角色
      //- .menus-header-header
        .iconfont.icon-add
    .role-menus-bd
      .menu-item(v-for="item in roleList", :class="{ 'active' : currentItem.roleId === item.roleId }" @click="changeRole(item)")
        .iconfont.icon-role
        .menu-item-value {{item.roleName}}
        .iconfont.el-icon-right(v-if="currentItem.roleId === item.roleId")
  .role-content
    .role-body
      .role-body-title 超级管理员
      .role-tabs
        .tab-item(@click="selectTab('list')", :class="{ 'active' : tabContent == 'list' }") 角色成员
        .tab-item(@click="selectTab('authority')", :class="{ 'active' : tabContent == 'authority' }") 角色权限
      .role-table(v-if="tabContent == 'list'")
        .role-table-header
          .role-table-title 全部人员（25人）
        el-table(
          :data="list"
          :header-cell-style="{ fontSize: '14px', color: '#64698F', background: '#F8F7FC' }"
          border
          style="width: 100%"
          v-loading="loading"
          empty-text="未找到符合条件的内容"
        )
          el-table-column(type="index" width="55" align="center" label="序号")
          el-table-column(label="姓名" prop="employeeName")
            template(slot-scope="scope")
              .table-item-bd.flex
                .table-item-name {{scope.row.employeeName}}
          el-table-column(label="账号" prop="userName")
          el-table-column(label="手机号" prop="mobile")
          el-table-column(label="邮箱" prop="email")
          el-table-column(label="操作" prop="")
            template(slot-scope="scope")
              .table-item-bd
                .table-item-handle
                  .table-item-btn.info(@click="delItem(scope.row)" v-if="$permission('AB-06001-003')") 删除
      .role-authority(v-if="tabContent == 'authority'")
        .role-table-header
          .role-table-title 设置角色的功能操作，管理权限
          el-checkbox(label="全选" @change="changeAll")
        .authority-table
          .table-row(v-for="item in permissionList")
            .table-col
              el-checkbox(v-model="item.own" @change="changeCheckbox($event, item)") {{item.name}}
            .table-child(v-if="item.children.length")
              .table-child-row(v-for="row in item.children")
                .table-col
                  el-checkbox(v-model="row.own" @change="changeCheckbox($event, row, item)") {{row.name}}
                .table-child(v-if="row.children.length")
                  .table-child-row(v-for="child in row.children")
                    .table-col
                      el-checkbox(v-model="child.own" @change="changeCheckbox($event, child, item, row)") {{child.name}}
                    .table-child(v-if="child.children.length")
                      .table-child-row(v-for="four in child.children")
                        .table-col
                          el-checkbox(v-model="four.own" @change="changeCheckbox($event, four, item, row, child)") {{four.name}}
                    .table-child(v-else)
                      .table-child-row
                        .table-col
                .table-child(v-else)
                  .table-child-row
                    .table-col
                    .table-child
                      .table-child-row
                        .table-col
            .table-child(v-else)
              .table-child-row
                .table-col
                .table-child
                  .table-child-row
                    .table-col
                    .table-child
                      .table-child-row
                        .table-col
        .table-footer
          el-button(type="primary" size="small" @click="save" v-if="$permission('AB-06002-001')") 确认
</template>

<script>
import { getRoleList, getMemberList, getListPermission, updatePermission, getUserInfo } from 'api'
import { mapActions } from 'vuex'
export default {
  name: 'roleManage',
  data () {
    return {
      roleList: [],
      currentItem: {},
      pageSize: 20,
      loading: false,
      list: [],
      tabContent: 'list',
      permissionList: [],
      selections: []
    }
  },
  methods: {
    ...mapActions([
      'changeUserInfo'
    ]),
    selectTab (key) {
      this.tabContent = key
      this.$router.replace({ name: this.$route.name, query: { tabContent: key } })
      // if (key === 'authority') this.getListPermission()
    },
    changeRole (row) {
      this.currentItem = row
      // this.tabContent = 'list'
      if (this.tabContent === 'list') this.getList()
      else this.getListPermission()
      // this.getList()
    },
    changeAll (value) {
      this.setCheckboxTrue(this.permissionList, value)
    },
    changeCheckbox (checked, item, first = '', secend = '', three = '') {
      if (item.own) {
        if (first) first.own = true
        if (secend) secend.own = true
        if (three) three.own = true
      } else {
        if (item.children.length) this.setCheckboxTrue(item.children, item.own)
      }
    },
    setCheckboxTrue (arr , checked) {
      arr.forEach(item => {
        item.own = checked
        if (item.children.length) this.setCheckboxTrue(item.children, checked)
      })
    },
    async getRoleList () {
      try {
        const { ResultSet } = await this.$axios.post(getRoleList)
        this.roleList = ResultSet.userData.userRoleList
        this.currentItem = ResultSet.userData.userRoleList[0]
        // this.getList()
      } catch (err) {
        console.log(err)
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
    async getListPermission () {
      try {
        const { ResultSet } = await this.$axios.post(getListPermission, { roleId: this.currentItem.roleId })
        this.permissionList = ResultSet.userData.permissionList
      } catch (err) {
        console.log(err)
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
    setChecked (arr) {
      arr.forEach(item => {
        item.isChecked = false
        if (item.children.length) this.setChecked(item.children)
      })
    },
    async save () {
      try {
        this.selections = []
        await this.getChecked(this.permissionList)
        if (!this.selections.length) {
          this.$message.error('请先选择要保存的角色权限！')
          return
        }
        await this.$axios.post(updatePermission, { roleId: this.currentItem.roleId, ids: this.selections })
        this.$message.success('保存成功！')
        this.getUserInfo()
        this.getListPermission()
      } catch (err) {
        console.log(err)
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
    async getUserInfo () {
      try {
        const { ResultSet } = await this.$axios.post(getUserInfo)
        this.changeUserInfo(ResultSet.userData)
      } catch (err) {
        console.log(err)
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
    getChecked (arr) {
      arr.forEach(item => {
        if (item.own) this.selections.push(item.id)
        if (item.children.length) this.getChecked(item.children)
      })
    },
    async getList () {
      try {
        this.loading = true
        let query = { ...this.$route.query }
        query.currentPage = this.$route.query.page || 1
        query.pageLines = this.pageSize
        if (this.currentItem.roleId) query.roleId = this.currentItem.roleId
        const { ResultSet } = await this.$axios.post(getMemberList, { ...query })
        if (this.searchString || this.roleId) this.page = 1
        else this.page = parseInt(this.$route.query.page) || 1
        this.total = ResultSet.recordNumber
        this.list = ResultSet.userData.onloadMemberList
        this.loading = false
      } catch (err) {
        this.loading = false
        console.log(err)
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
  },
  beforeRouteEnter (to, from, next) {
    next(async vm => {
      vm.tabContent = to.query.tabContent || 'list'
      await vm.getRoleList()
      if (vm.tabContent === 'list') vm.getList()
      else vm.getListPermission()
      // vm.getList()
    })
  },
  beforeRouteUpdate (to, from, next) {
    next()
    this.tabContent = to.query.tabContent || 'list'
    // this.getRoleList()
    if (this.tabContent === 'list') this.getList()
    else this.getListPermission()
    // this.getList()
  }
} 
</script>

<style lang="scss" scoped>
.role {
  display: flex;
  height: 100%;
}
.role-menus {
  width: 280px;
  min-width: 280px;
  height: 100%;
  padding: 24px 0 24px 24px;
  background: #FFFFFF;
  border: 1px solid #F3F3F4;
  box-sizing: border-box;
  box-shadow: 0px 4px 0px #F3F3F4;
  border-radius: 10px 10px 0 0;
}
.role-menus-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 24px;
}
.menus-header-title {
  font-size: 16px;
  line-height: 24px;
  color: #3E4373;
}
.role-menus-bd {
  margin-top: 22px;
}
.menu-item {
  padding: 8px 24px 8px 16px;
  border-radius: 6px 0px 0px 6px;
  margin-bottom: 17px;
  display: flex;
  align-items: center;
  cursor: pointer;
  .menu-item-value {
    flex: 1;
    font-size: 14px;
    line-height: 22px;
    color: #64698F;
  }
  .icon-role {
    font-size: 24px;
    color: #B2B4C7;
    margin-right: 4px;
  }
  .el-icon-right {
    font-size: 24px;
    color: #FF708B;
  }
  &.active {
    background: #FFF5F8;
    .menu-item-value {
      color: #FF708B;
    }
    .icon-role {
      color: #FF708B;
    }
  }
}
.role-content {
  padding-left: 16px;
  flex: 1;
  height: 100%;
  .role-body {
    background: #FFFFFF;
    border: 1px solid #F3F3F4;
    box-sizing: border-box;
    box-shadow: 0px 4px 0px #F3F3F4;
    border-radius: 10px;
    width: 100%;
    height: 100%;
  }
}
.role-body-title {
  padding: 24px 40px;
  font-size: 16px;
  line-height: 24px;
  color: #3E4373;
}
.role-tabs {
  display: flex;
  align-items: center;
  padding: 0 24px;
  border-bottom: 1px solid #EDEDED;
  .tab-item {
    position: relative;
    margin: 0 16px;
    padding: 5px 0;
    font-weight: bold;
    font-size: 14px;
    line-height: 22px;
    color: #8B8EAB;
    cursor: pointer;
    &.active {
      color: #FF708B;
      &:after {
        content: '';
        position: absolute;
        width: 100%;
        height: 2px;
        background: #FF708B;
        left: 0;
        bottom: 0;
      }
    }
  }
}
.role-table {
  height: calc(100% - 105px);
  padding: 0 40px;
  overflow: auto;
}
.role-table-header {
  padding: 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .role-table-title {
    font-size: 12px;
    line-height: 24px;
    color: #64698F;
  }
}
.table-item-bd {
  &.flex {
    display: flex;
    align-items: center;
  }
  &.click {
    cursor: pointer;
  }
  .table-item-head {
    width: 24px;
    height: 24px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 4px;
    margin-right: 8px;
  }
}
.table-item-handle {
  display: flex;
  .table-item-btn {
    margin-right: 8px;
    padding: 5px 8px;
    font-size: 12px;
    line-height: 20px;
    border-radius: 6px;
    cursor: pointer;
    &.warning {
      background: #FDEFF1;
      color: #FF2E42;
    }
    &.normal {
      background: #F3F0FF;
      color: #7362F0;
    }
    &.info {
      background: #F6F6F9;
      color: #3E4373;
    }
  }
}
.role-authority {
  height: calc(100% - 105px);
  padding: 0 20px 20px;
  overflow: auto;
}
.authority-table {
  display: inline-block;
  // height: calc(100% - 116px);
}
.table-row {
  width: 100%;
  display: flex;
  border: 1px solid #EDEDED;
  border-bottom: none;
  border-top: none;
  border-right: none;
  &:first-child {
    border-top: 1px solid #EDEDED;
  }
}
.table-col {
  display: flex;
  align-items: center;
  min-height: 48px;
  width: 310px;
  padding: 0 24px;
  border-right: 1px solid #EDEDED;
  border-bottom: 1px solid #EDEDED;
  .el-checkbox {
    color: #3E4373;
  }
}
.flex-half {
  flex: 0.5;
}
.flex-1 {
  flex: 1;
}
.table-child {
  
}
.table-child-row {
  display: flex;
}
.table-footer {
  padding-top: 20px;
  text-align: right;
}
</style>
